<html>
<head>
    <meta name=viewport content="width=device-width,initial-scale=1"> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
	<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<script>

		class Figure {
			constructor(board) {
				this.board = board
			}

			plot(x, y, params) {
				console.assert(x.length === y.length)
				if (x.length === 0)
					return;
				this.board.create('curve', [x, y], {strokeWidth:2, strokeColor:params['color']})

				let maxX = JXG.Math.Statistics.max(x)
				let minX = JXG.Math.Statistics.min(x)
				let maxY = JXG.Math.Statistics.max(y)
				let minY = JXG.Math.Statistics.min(y)
				this.minX = this.minX ? Math.min(this.minX, minX) : minX
				this.minY = this.minY ? Math.min(this.minY, minY) : minY
				this.maxX = this.maxX ? Math.max(this.maxX, maxX) : maxX
				this.maxY = this.maxY ? Math.max(this.maxY, maxY) : maxY
				// boundingBox = [左上角x，左上角y，右上角x，右上角y]
				this.board.setBoundingBox([this.minX * 0.95, this.maxY * 1.05, this.maxX * 1.05, this.minY * 0.95]);
			}
		}

		var board = null

		function init() {
			loadJsFile()
		}

		function getBoard() {
			if(!board) {
				board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true, grid:true, keepaspectratio:false})
			}
			else {
				JXG.JSXGraph.freeBoard(board);
				board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true, grid:true, keepaspectratio:false});
			}
			return board;
		}
		
		function run() {
			var codeEditor = document.getElementById('codeEditor')
			var text = codeEditor.value;
			(function() {eval(text)})()
		}
		
		// 异步加载js代码
		function loadJsFile() {
			var xmlhttp;
			if (window.XMLHttpRequest)
			{
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp=new XMLHttpRequest();
			}
			else
			{
				// IE6, IE5 浏览器执行代码
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function()
			{
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
					document.getElementById("codeEditor").value=xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","./comparisonSort.js",true);
			xmlhttp.send();
		}
	</script>
</head>
<body style="width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;" onload="init()">
	<div style="background:gray;width:50%;height:100%;float:left;display:flex;flex-flow:column">
		<textarea id="codeEditor" style="width:100%;flex-grow:1;">

		
		</textarea>
		<button id="submit" style="float:right" onclick="run()">提交</button>
	</div>
<div style="background:darkgray;width:50%;height:100%;float:left;overflow:auto">
	<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
</div>
</body>
</html>